.flyball-outerbox {
  width: 100%;
  height: 100%;
  background: #020a35;
  padding: 20px 0;
  margin-top: 10px;
  .flyball-box {
    width: 800px;
    margin: 0px auto 0;
    position: relative;
    .flyball-arthTurn {
      width: 418px;
      height: 207px;
      background: url(./images/arthbg1.png) center top no-repeat;
      margin: 0px auto;
      position: relative;
      z-index: 999;
      .flyball-shade {
        width: 40px;
        height: 20px;
        background: #020a35;
        position: absolute;
        z-index: 99;
        left: 0;
        top: 0;
      }
      &::after {
        position: absolute;
        content: '';
        width: 235px;
        height: 65px;
        right: -200px;
        top: 60px;
        background: url(./images/arthRight.png) center no-repeat;
      }

      &::before {
        position: absolute;
        content: '';
        width: 225px;
        height: 65px;
        left: -200px;
        top: 60px;
        background: url(./images/arthLeft.png) center no-repeat;
      }
    }

    .begin-point {
      width: 2px;
      height: 2px;
      background: transparent;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -1px;
    }

    .end-point {
      width: 2px;
      height: 2px;
      background: transparent;
      position: absolute;
      left: 50%;
      bottom: 0;
      margin-left: -1px;
    }
  }
}
